<template>
    <div class="pageWrapper">
        <row class="form">
            <SearchBarItem label="清分日期：" :labelLg="8">
                <DatePicker type="daterange" ref="createDatePicker" :value="value" split-panels transfer placeholder="起始时间" @on-change="createTime" ></DatePicker>
            </SearchBarItem>
        </row>
        <Tabs :animated="false" type="card" v-model="tabsName">
            <TabPane label="汇总对账" name="汇总对账"  >
                <ClearingDetailCount :clearingDate="clearingDate" />
            </TabPane>
            <TabPane label="明细对账" name="明细对账">
                <ClearingDetailAccount v-if="tabsName == '明细对账'" ref="detaiAcc" :searchObj="searchObj" :clearingDate="clearingDate" :isClearQuery="isClearQuery"/>
            </TabPane>
        </Tabs>
    </div>
</template>
<script>
import { DatePicker, Tabs, TabPane, Col, Row } from "view-design";
import util from "@/utils/util";
import SearchBar from "@/components/SearchBar";
import ClearingDetailAccount from "./ClearingDetailAccount";
import ClearingDetailCount from "./ClearingDetailCount";

export default {
    name: "clearingDetele",
    components: {
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        ClearingDetailCount,
        ClearingDetailAccount,
        DatePicker,
        Tabs,
        TabPane,
        Col,
        Row
    },
    data() {
        return {
            loading: true,
            tabsName: this.$route.query.type ? this.$route.query.type : '汇总对账',
            searchObj: {}, /** 搜索参数 */
            value: [], /** 默认时间 **/
            subMchId: '', /** 商户号 **/
            clearingDate: [], /** 清分日期 **/
            costTypeStatus: '', /** 费用类型 */
            isClearQuery: false,
        };
    },
    beforeRouteEnter(to, from, next){
        next(vm => {
            if ( from.path.indexOf('clearingDeteleForm') > -1 ) {
                vm.tabsName = '明细对账';
                console.log(vm.$store.state.clearingDeteleAccount.searchObj, '参数-tab--')
                vm.searchObj = vm.$store.state.clearingDeteleAccount.searchObj;
            }else {
                vm.isClearQuery = true;
            }
        });
    },
    created() {
        /**
         * url 带参数的处理
        * **/
        let clearDate = util.getUrlParam('clearDate');
        if( clearDate ) {
            this.$set(this.value, 0, clearDate);
            this.$set(this.value, 1, clearDate);
            this.$set(this.clearingDate, 0, clearDate);
            this.$set(this.clearingDate, 1, clearDate);
        }
        console.log(clearDate, '详情返回时间--clearDate--')

    },
    mounted() {
        /** 汇总跳转明细 参数 */
        this.$bus.$on("goDetailAcc", data => {
            console.log('明细对账劲来了--')
            this.tabsName = '明细对账';
            // this.searchObj = 
            // this.searchObj.subMchId = data.subMchId;
            // this.searchObj.costTypeStatus = data.costType;
            this.$set(this.value, 0, data.clearDate);
            this.$set(this.value, 1, data.clearDate);
            this.$set(this.clearingDate, 0, data.clearDate);
            this.$set(this.clearingDate, 1, data.clearDate);
        });
    },
    methods: {
        /** 清分日期 **/
        createTime(date, type) {
            this.clearingDate = date ? date : [];
        },
    },
    beforeDestroy() {
        this.$bus.$off("goDetailAcc");
    }
};
</script>
<style scoped>
.form >>> .ivu-col {
    line-height: 40px;
}
</style>
